<script setup>
    import {Edit} from '@element-plus/icons-vue'
</script>
<template>
    <div>
        <h1>基本用法</h1>
        <el-link href="https://element-plus.org" target="_blank">默认</el-link>
        <el-link type="primary">主要</el-link>
        <el-link type="success">成功</el-link>
        <el-link type="warning">警告</el-link>
        <el-link type="danger">危险</el-link>
        <el-link type="info">信息</el-link>
    </div>
    <div>
        <h1>禁用状态</h1>
        <el-link disabled href="https://element-plus.org" target="_blank">默认</el-link>
        <el-link disabled type="primary">主要</el-link>
        <el-link disabled type="success">成功</el-link>
        <el-link disabled type="warning">警告</el-link>
        <el-link disabled type="danger">危险</el-link>
        <el-link disabled type="info">信息</el-link>
    </div>
    <div>
        <h1>下划线</h1>
        <el-link>默认</el-link>
        <el-link underline="always">总是</el-link>
        <el-link underline="hover">悬浮</el-link>
        <el-link underline="never">从不</el-link>
    </div>
    <div>
        <h1>图标</h1>
        <el-link :icon="Edit">编辑</el-link>
        <el-link>
            <el-icon>
                <Edit></Edit>
            </el-icon>
            编辑
        </el-link>
    </div>
</template>

<style scoped>
    .el-link {
        margin-right: 8px;
    }
    .el-link:last-child {
        margin-right: 0;
    }
</style>